<template>
 <div class="conent">
      <el-result icon="warning" title="暂无">
        <template #sub-title>
          <p>正在开展新的模板，敬请期待！</p>
        </template>
        <template #extra>
         <span style="color: #b1b1b1;">{{ displayedText }}</span>
         <span style="color: #7b7979;padding-left: 10px;">{{ cursor }}</span>
        </template>
      </el-result>
   </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 定义 HTML 代码片段数组
const htmlCodeSnippets = [
  '<div>日报数据***</div>',
  '<img src=“巡查**.jpg”></img>',
  '<p>姓名：李**</p>',
  '<span>蓝藻项目***</span>',
  '<a href="巡查**.cn">立即***</a>',
  '<button>提交***</button>',
];

// 存储当前已经显示的文本
const displayedText = ref('');
// 光标字符
const cursor = ref('|');
// 当前处理的代码片段
let currentSnippet = '';
// 当前字符的索引
let currentIndex = 0;
// 定时器 ID
let intervalId;
// 光标闪烁定时器 ID
let cursorIntervalId;

// 随机选择一个代码片段
const getRandomSnippet = () => {
  const randomIndex = Math.floor(Math.random() * htmlCodeSnippets.length);
  return htmlCodeSnippets[randomIndex];
};

// 显示下一个字符的函数
const showNextChar = () => {
  if (currentIndex < currentSnippet.length) {
    // 若还未显示完当前代码片段的所有字符，添加下一个字符到显示文本中
    displayedText.value += currentSnippet[currentIndex];
    currentIndex++;
  } else {
    // 若当前代码片段已显示完，重新选择一个随机代码片段并重置索引和显示文本
    currentSnippet = getRandomSnippet();
    currentIndex = 0;
    displayedText.value = '';
  }
};

// 光标闪烁函数
const blinkCursor = () => {
  cursor.value = cursor.value === '|' ? ' ' : '|';
};

onMounted(() => {
  // 组件挂载时随机选择一个代码片段开始显示
  currentSnippet = getRandomSnippet();
  // 启动定时器，每隔 100 毫秒执行一次 showNextChar 函数
  intervalId = setInterval(showNextChar, 100);
  // 启动光标闪烁定时器，每隔 500 毫秒执行一次 blinkCursor 函数
  cursorIntervalId = setInterval(blinkCursor, 200);
});

onUnmounted(() => {
  // 组件卸载时清除定时器，避免内存泄漏
  clearInterval(intervalId);
  clearInterval(cursorIntervalId);
});
</script>

<style scoped>

.conent{
   height: 100%;
  display: flex;
            justify-content: center;
            align-items: center;
}
</style>
